<template>
	<div>
		<Banner :propsbanner='bannerList'></Banner>
		<Icons :propsicons='iscoslist'></Icons>
		<Tabs :propstabs='tabslist'></Tabs>
		<Scroll :propsscroll='scrolllist'></Scroll>
		<!-- 中部轮播 -->
		<Lunbo :propslunbo='lunbolist'></Lunbo>
		<!-- 限时特惠 -->
		<Spike :propspike='SpikeList'></Spike>
		<!-- 选项卡区域 -->
		<Category :propsCategory='categorylist'></Category>
		<!-- 底部区域 -->
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script>
//引入Banner组件	
import Banner from'./pages/Banner.vue';
//引入Icons组件
import Icons from'./pages/Icons.vue';
import Tabs from'./pages/Tabs.vue'
import Scroll from './pages/Scroll.vue'
import Lunbo from'./pages/Lunbo.vue'
import Spike from'./pages/Spike.vue'
import Category from'./pages/Category.vue'
import BottomNav from '../default/BottomNav.vue'
export default{
	name:'Home',
	//组件列表的调用
	components:{
		Banner,
		Icons,
		Tabs,
		Scroll,
		Lunbo,
		Spike,
		Category,
		BottomNav
	},
	data(){
		return{
			arrUrl:['images/1_1.png','images/2_1.png','images/3_1.png'],
			bannerList:[],
			SpikeList:{},
			iscoslist:{},
			tabslist:{},
			scrolllist:{},
			lunbolist:{},
			categorylist:{}
		}
	},
	//create:当前组件创建之后 【el挂载之前（标签未渲染），data函数已经完成了初始化】
	//父组件需要将请求的数据给到子组件的话，满足：1.data函数已初始化；2.响应数据传给子组件（组件已渲染）
	//mounted:组件挂载之后
	created() {
		//备份[避免堵塞]
		let that = this;
		//向dataHome.json文件发起异步请求
		this.axios.get('/api/dataHome.json').then( (res)=> {
			
			let data = res.data.Homemsg[0];
			// 提取banner组件的数据
			that.bannerList = data.BannerVueList;
			//提取Spike组件的数据
			that.SpikeList = data.SpikeVueList;
			//提取icons组件的数据
			that.iscoslist = data.IconsVuelist;
			//提取tabs组件的数据
			that.tabslist = data.Tabsvuelist;
			//提取scroll组件的数据
			that.scrolllist=data.scrollvuelist
			//提取Lunbo组件的数据
			that.lunbolist=data.Lunbovuelist
			//提取Category组件的数据
			that.categorylist=data.tabslist
		}).catch( (error)=> {
			console.log(error);
		});
	}
}
</script>

<style>
</style>
